import TextContent from "./TextContent";
import classes from  './TextList.module.css'
import socket from '../../ws'
import {useEffect,useState} from "react";

function TextList(){

    const [textlist,setTextlist] = useState();

    useEffect(() => {
        socket.on('text',(data) => {
            setTextlist(data)
        })
    },[])

    return(
        <ul className={classes.ul}>
            {
                (textlist && textlist.length > 0) ?
                    (textlist.map((item) => {
                        return (<TextContent key={item.date} username={item.username} msg={item.msg} avatar={item.avatar}/>)
                    })) :
                    (<p>loading...</p>)
            }
        </ul>
    )
}
export default TextList;